<template>
    <a-button type="primary"  @click="addRow">
        新增
    </a-button>
    <a-table :columns="columns" :data-source="data" >
        <template #bodyCell="{ column, record, text, index }">
            <template v-if="column.key === 'code'">
              <div style="display: flex; gap: 8px;">
                <a-input v-model:value="record.code" @change="(e) => handleBuisnessValue(record)"/>
              </div>
            </template>
            <template v-if="column.key === 'paramType'">
              <div style="display: flex; gap: 8px;">
                <a-select v-model:value="record.paramType" style="width: 100%;min-width: 100px;" @change="(e) => handleBuisnessValue(record)">
                    <a-select-option  key="0" value="0">整数</a-select-option>
                    <a-select-option  key="1" value="1">字符串</a-select-option>
                    <a-select-option  key="2" value="2">数值</a-select-option>
                    <a-select-option  key="3" value="3">布尔</a-select-option>
                    <a-select-option  key="4" value="4">时间</a-select-option>
                </a-select>
              </div>
            </template>
            <template v-if="column.key === 'name'">
              <div style="display: flex; gap: 8px;">
                <a-input v-model:value="record.name" @change="(e) => handleBuisnessValue(record)"/>
              </div>
            </template>
        </template>
    </a-table>
  </template>
  <script lang="tsx" setup>
  import { ref } from 'vue';
  import {processInfo} from '@/store/modules/processInfo';
  import {Input,Select} from 'ant-design-vue'

  const processInfoStore = processInfo();
  const data=ref<any>([]);
  const columns = [
    {
      title: '参数编码',
      dataIndex: 'code',
      key: 'code',
    },
    {
      title: '参数类型',
      dataIndex: 'paramType',
      key: 'paramType',
      width: '12%'
    },
    {
      title: '参数说明',
      dataIndex: 'name',
      width: '30%',
      key: 'name',
    },
  ];
  
  interface DataItem {
    key: number;
    name: string;
    age: number;
    address: string;
    children?: DataItem[];
  }

  const loadData=()=>{
    if(processInfoStore.procVariable[1]!==undefined){
      if(processInfoStore.procVariable[1].length>0){
      data.value=processInfoStore.procVariable[1]
    }
    
    console.log(processInfoStore.procVariable[1],"taskAttrStore.procVariable[1]")
    }
    
  }
  loadData();
  const addRow=()=>{
    const newRow={
        code:"",
        paramType:"1",
        name:"",
    }
    data.value.push(newRow);
  }
  const handleBuisnessValue=(record)=>{
    processInfoStore.procVariable[1]=data.value;
    console.log(processInfoStore.procVariable[1],"taskAttrStore.procVariable[1]")
  }

  </script>
  
  